<!DOCTYPE html>

<html lang="en">
  <meta charset="utf-8" />
  <title>ICERender-text-basic</title>
  <body>
    <div>
      <button id="btn-1">保存</button>
      <button id="btn-2">加载</button>
      <button id="btn-3">清除所有</button>
      <script src="../dist/index.umd.js"></script>
    </div>
    <br/>
    <canvas id="canvas-1" width="1024" height="768" style="background-color: #f7f7f7;"></canvas>
  </body>
  <script type="text/javascript">
        let ice = new ICE.ICE().init('canvas-1');

        document.querySelector('#btn-1').addEventListener('click', (evt) => {
          const jsonStr = ice.toJSONString();
          window.localStorage.setItem('json-data', jsonStr);
        });
        document.querySelector('#btn-2').addEventListener('click', (evt) => {
          const jsonStr = window.localStorage.getItem('json-data');
          ice.fromJSONString(jsonStr);
        });
        document.querySelector('#btn-3').addEventListener('click', (evt) => {
          console.log('ice.clearAll()');
          ice.clearAll();
        });

        for(let i=0;i<100;i++){
          let text = new ICE.ICEText({
            left: Math.random()*1024,
            top: Math.random()*768,
            text: 'Test long long long text...',
            style: {
              strokeStyle: '#ff3300',
              fillStyle: '#ff3300',
              // lineWidth: 5,
              fontSize:18,
            },
            stroke: false,
            // fill: false,
            showMinBoundingBox: true,
            showMaxBoundingBox: true,
          });
          ice.addChild(text);
        }
  </script>
</html>
